<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
        {{title}}
    </title>
    <link rel="stylesheet" href="/lib/layui-slider/css/layui.css">
    <style>
        .laytable-cell-1-0-0 {
            width: 50px !important;
        }

        .laytable-cell-1-0-1 {
            width: 80px !important;
        }

        .laytable-cell-1-0-2 {
            width: 140px !important;
        }

        .laytable-cell-1-0-3 {
            width: 110px !important;
        }

        .laytable-cell-1-0-4 {
            width: 180px !important;
        }

        .laytable-cell-1-0-5 {
            width: 180px !important;
        }

        .layuimini-container .laytable-cell-1-0-6 {
            width: 258px !important;
        }
    </style>
</head>

<body>
    <div id="viewport">
        {{include 'template/sidebar.html'}}
        <div id="content">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i></a>
                        </li>
                        <li>
                            <a class="admin-username">测试用户</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="layuimini-container">
                    <div class="layuimini-main">
                        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                        <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1"
                            lay-id="currentTableId">
                            <div class="layui-table-tool">
                                <div class="layui-table-tool-temp">
                                    <div class="layui-btn-container"> <button
                                            class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                                            onclick="openCollection()" lay-event="add">同步</button> <button
                                            class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"
                                            lay-event="delete" onclick="stopCollection()">停用</button> </div>
                                </div>
                                <div class="layui-table-tool-self">
                                    <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i
                                            class="layui-icon layui-icon-cols"></i>
                                    </div>
                                    <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i
                                            class="layui-icon layui-icon-export"></i></div>
                                    <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
                                            class="layui-icon layui-icon-print"></i>
                                    </div>
                                    <div class="layui-inline" title="提示" lay-event="LAYTABLE_TIPS"><i
                                            class="layui-icon layui-icon-tips"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-table-box">
                                <div class="layui-table-header">
                                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table"
                                        lay-skin="line">
                                        <thead>
                                            <tr>
                                                <th data-field="0" data-key="1-0-0" data-unresize="true"
                                                    class=" layui-table-col-special">
                                                    <div id="changeSelectState"
                                                        class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">
                                                        <input type="checkbox" name="layTableCheckbox"
                                                            lay-skin="primary" lay-filter="layTableAllChoose">
                                                        <div class="layui-unselect layui-form-checkbox"
                                                            lay-skin="primary"><i class="layui-icon layui-icon-ok"></i>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th data-field="id" data-key="1-0-1" class=" layui-unselect">
                                                    <div class="layui-table-cell laytable-cell-1-0-1">
                                                        <span>ID</span>
                                                        <!-- <span class="layui-table-sort layui-inline"><i
                                                                class="layui-edge layui-table-sort-asc"
                                                                title="升序"></i><i
                                                                class="layui-edge layui-table-sort-desc"
                                                                title="降序"></i></span> -->
                                                    </div>
                                                </th>
                                                <th data-field="username" data-key="1-0-2" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-2"><span>集合名称</span>
                                                    </div>
                                                </th>
                                                <th data-field="sex" data-key="1-0-3" class=" layui-unselect">
                                                    <div class="layui-table-cell laytable-cell-1-0-3">
                                                        <span>状态</span>
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序"></i><i
                                                                class="layui-edge layui-table-sort-desc"
                                                                title="降序"></i></span>
                                                    </div>
                                                </th>
                                                <th data-field="experience" data-key="1-0-4" class=" layui-unselect">
                                                    <div class="layui-table-cell laytable-cell-1-0-4">
                                                        <span>更新时间</span>
                                                    </div>
                                                </th>
                                                <th data-field="city" data-key="1-0-5" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-5"><span>描述</span>
                                                    </div>
                                                </th>

                                                <th data-field="6" data-key="1-0-6" data-minwidth="100"
                                                    class=" layui-table-col-special">
                                                    <div class="layui-table-cell laytable-cell-1-0-6" align="right">
                                                        <span>操作</span>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="layui-table-body layui-table-main">
                                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table"
                                        lay-skin="line">
                                        <tbody>
                                            {{each userList}}
                                            <tr data-index="5" class="interface">
                                                <td data-field="0" data-key="1-0-0" class="layui-table-col-special">
                                                    <div
                                                        class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">
                                                        <input type="checkbox" name="layTableCheckbox"
                                                            lay-skin="primary">
                                                        <div class="layui-unselect layui-form-checkbox"
                                                            lay-skin="primary"><i class="layui-icon layui-icon-ok"></i>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td data-field="id" data-key="1-0-1" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-1">
                                                        {{$value.collection_id}}
                                                    </div>
                                                </td>
                                                <td data-field="username" data-key="1-0-2" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-2">
                                                        {{$value.collection_name}}</div>
                                                </td>
                                                <td data-field="state" data-key="1-0-3" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-3">
                                                        {{$value.state=="1" ?
                                                        "同步中":"已停用"}}
                                                    </div>
                                                </td>
                                                <td data-field="city" data-key="1-0-4" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-4">
                                                        {{$value.update_time }}
                                                    </div>
                                                </td>
                                                <td data-field="experience" data-key="1-0-5" class="">
                                                    <div class="layui-table-cell laytable-cell-1-0-5">
                                                        {{$value.description}}</div>
                                                </td>
                                                <td data-field="6" data-key="1-0-6" align="right" data-off="true"
                                                    data-minwidth="100" class="layui-table-col-special">
                                                    <div class="layui-table-cell laytable-cell-1-0-6">
                                                        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"
                                                            lay-event="edit" onclick="openCollection()">同步</a>
                                                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"
                                                            lay-event="delete" onclick="stopCollection()">停用</a>
                                                    </div>
                                                </td>
                                            </tr>
                                            {{/each}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="layui-table-page">
                                <div id="layui-table-page1">
                                    <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a
                                            href="javascript:;" class="layui-laypage-prev layui-disabled"
                                            data-page="0"><i class="layui-icon"></i></a><span
                                            class="layui-laypage-curr"><em
                                                class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;"
                                            class="layui-laypage-next layui-disabled" data-page="2"><i
                                                class="layui-icon"></i></a><span class="layui-laypage-skip">到第<input
                                                type="text" min="1" value="1" class="layui-input">页<button type="button"
                                                class="layui-laypage-btn">确定</button></span><span
                                            class="layui-laypage-count">共 3
                                            条</span><span class="layui-laypage-limits"><select lay-ignore="">
                                                <option value="10">10 条/页</option>
                                                <option value="15" selected="">15 条/页</option>
                                                <option value="20">20 条/页</option>
                                                <option value="25">25 条/页</option>
                                                <option value="50">50 条/页</option>
                                                <option value="60">60 条/页</option>
                                            </select></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/lib/layui-slider/js/layui.js" charset="utf-8"></script>
    <script src="/js/jquery-3.5.1.min.js" charset="utf-8"></script>
    <script src="/lib/dream-msg/js/dream-msg.min.js"></script>
    <script src="/js/cookie-login.js"></script>
    <script>
        //编辑接口函数
        function stopCollection() {
            let target = new Array();
            let interfaceList = $(".layui-table-body .layui-form-checked");
            if (!interfaceList.length) {
                Dreamer.warning("当前未选中任何集合哦~");
                return;
            }
            interfaceList.each((index, item) => {
                let tempNode = $(item).parent().parent().parent();
                const targetNum = parseInt($(tempNode).children("td[data-field='id']").children()[0].innerHTML);
                const targetState = String($(tempNode).children("td[data-field='state']").children()[0].innerHTML).indexOf("已停用") == -1;
                if (targetState) target.push(targetNum);
            })
            if (!target.length) {
                Dreamer.error("当前所选集合均已停用哦~");
                return;
            }
            $.ajax({
                url: "/v1/close",
                data: {
                    collection_id: target
                },
                method: "POST",
                success: (res) => {
                    if (!res.code) {
                        window.location.reload();
                        Dreamer.success("停用成功~");
                    } else {
                        Dreamer.error(res.msg);
                    }
                }, fail: (err) => {
                    Dreamer.error("后端出错啦~");
                }
            })
        }
        function openCollection() {
            let target = new Array();
            let interfaceList = $(".layui-table-body .layui-form-checked");
            if (!interfaceList.length) {
                Dreamer.warning("当前未选中任何集合哦~");
                return;
            }
            interfaceList.each((index, item) => {
                let tempNode = $(item).parent().parent().parent();
                const targetNum = parseInt($(tempNode).children("td[data-field='id']").children()[0].innerHTML);
                const targetState = String($(tempNode).children("td[data-field='state']").children()[0].innerHTML).indexOf("同步中") == -1;
                if (targetState) target.push(targetNum);
            })
            if (!target.length) {
                Dreamer.error("当前所选集合均同步中哦~");
                return;
            }
            $.ajax({
                url: "/v1/open",
                data: {
                    collection_id: target
                },
                method: "POST",
                success: (res) => {
                    if (!res.code) {
                        window.location.reload();
                        Dreamer.success("同步成功~");
                    } else {
                        Dreamer.error(res.msg);
                    }
                }, fail: (err) => {
                    Dreamer.error("后端出错啦~");
                }
            })
        }
        $("#changeSelectState").on("click", function () {
            const checkList = $(".layui-table-body .layui-unselect");
            if (!$(this).hasClass("layui-form-checked")) {
                $(this).addClass("layui-form-checked");
                for (var i = 0; i < checkList.length; i++) {
                    if (!$(checkList[i]).hasClass("layui-form-checked")) {
                        $(checkList[i]).addClass("layui-form-checked");
                    }
                }
            } else {
                $(this).removeClass("layui-form-checked");
                for (var i = 0; i < checkList.length; i++) {
                    if ($(checkList[i]).hasClass("layui-form-checked")) {
                        $(checkList[i]).removeClass("layui-form-checked");
                    }
                }
            }
        })
        layui.use(['form', 'table'], function () {
            var form = layui.form,
                table = layui.table;

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {

                    var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/edit.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });
        });
        //监听删除按钮
    </script>
</body>

</html>